<template>
  <div class="add">
    <h3>{{title}}</h3>
    <div class="artifiadd-form__wapper">
      <el-form label-position="top" label-width="80px" :model="form">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item :label="$t('configLazyLoad.qualityCheck.name')">
              <el-input :maxlength="20" v-model.trim="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item :label="$t('configLazyLoad.qualityCheck.qualityCycle')">
              <el-select v-model="form.cycle">
                <el-option v-for="item in cycleOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item :label="$t('configLazyLoad.qualityCheck.remindThreshold')">
              <el-input v-model="form.threshold" :placeholder="$t('configLazyLoad.qualityCheck.performanceError1')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('email.RemindAgents')">
              <agent-select ref="agents" size="small" :agent="form.extens" multiple :agentChange="getAgent">
              </agent-select>
              <el-checkbox class="check" v-model="form.includeSubordinate">{{$t('public.includeUnderAgent')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="button-group">
            <el-button type="primary" class="primary_btn" @click.stop="submitForm">{{$t('public.save')}}</el-button>
            <el-button class="primary_btn mar-left" @click.stop="resetForm">{{$t('public.cancel')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import AgentSelect from '@/components/public-modules/cache/AgentSelect'
  export default {
    name: 'Artificial',
    data () {
      return {
        agents: [],
        form: {
          _id: '',
          name: '',
          cycle: '',
          includeSubordinate: '',
          extens: [],
          threshold: ''
        }
      }
    },
    props: {
      title: {
        type: String,
        default: function () {
          return this.$t('public.add')
        }
      },
      cycleOptions: Array,
      initData: {
        type: Object,
        default: function () {
          return {
            _id: '',
            name: '',
            cycle: '',
            includeSubordinate: '',
            extens: [],
            threshold: ''
          }
        }
      }
    },
    watch: {
      initData (cur) {
        this.$set(this, 'form', JSON.parse(JSON.stringify(cur)))
      }
    },
    components: {
      AgentSelect
    },
    methods: {
      resetForm () {
        let form = {
          _id: '',
          name: '',
          cycle: '',
          includeSubordinate: '',
          extens: [],
          threshold: ''
        }
        if (this.initData.name) {
          form = JSON.parse(JSON.stringify(this.initData))
        }
        this.$set(this, 'form', form)
        this.$emit('cancle')
      },
      getAgent (agents) {
        this.agents = agents
      },
      validate (form) {
        if (!form.name) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.performanceError2'))
          return false
        }
        if (!form.cycle) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.performanceError3'))
          return false
        }
        if (!(+form.threshold) || +form.threshold < 1 || +form.threshold > 99999) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.remindThreshold') + this.$t('configLazyLoad.qualityCheck.performanceError1'))
          return false
        }
        if (form.extens.length === 0) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.performanceError4'))
          return false
        }
        return true
      },
      submitForm () {
        let extens = this.$refs.agents.value || []
        this.form.extens = extens.map(val => val)
        if (!this.validate(this.form)) return null
        this.$emit('save', this.form)
        this.resetForm()
      }
    },
    beforeMount () {
      this.form = JSON.parse(JSON.stringify(this.initData))
    }
  }
</script>
<style lang="stylus">
  .artifiadd-form__wapper
    .el-form-item__content
      padding-top 5px
</style>
<style lang="stylus" scoped>
  @import '../base'
  .artifiadd-form__wapper
    margin-top 12px
    .el-form-item__content
      padding-top 5px
  .check
    margin-left 50px
  .el-select
    width 350px
</style>
